<template>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="出租者" name="first">
          <el-cascader :options="options" clearable @change="b">
        <template slot-scope="{ node, data }"  >
        <span>{{ data.label }}</span>
        <span v-if="!node.isLeaf" > ({{ data.children.length }}) </span>
        </template>
        </el-cascader>
      车位ID：
      <el-input style="width: 150px"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                v-model="input">
      </el-input>
      <el-button>查询</el-button>
    <el-divider></el-divider>
      <template>
  <el-table
    :data="tableData"

    border
    style="width: 100%"
    :hidden='side'>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="车库名"
      width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="总收入"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="进场车流"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="入场车流"
        width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="订单量">
    </el-table-column>
  </el-table>
</template>
      </el-tab-pane>
      <el-tab-pane label="抢租客" name="second">
        <el-table
            :data="tableData"

            border
            style="width: 100%"
            :hidden='side'>
          <el-table-column
              prop="date"
              label="日期"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="抢租客名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="去过车库总和"
              width="180">
          </el-table-column>
          <el-table-column
              prop="name"
              label="总花费"
              width="180">
          </el-table-column>
          <el-table-column
              prop="address"
              label="订单量">
          </el-table-column>
        </el-table>
      </el-tab-pane>
        </el-tabs>
    </div>

</template>

<script>
export default {
    name:"earnings",
    data() {
        return{
            side:true,
             options: [{
          value: 'zhinan',
          label: '2021年',
          children:[{
            value: 'shejiyuanze',
            label: '1月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          },
          {
            value: 'shejiyuanze',
            label: '2月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          },{
            value: 'shejiyuanze',
            label: '3月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          }]
        },{
          value: 'zhinan',
          label: '2020年',
          children:[{
            value: 'shejiyuanze',
            label: '1月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          },
          {
            value: 'shejiyuanze',
            label: '2月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          },{
            value: 'shejiyuanze',
            label: '3月',
            children: [{
            value: '地址',
              label: '1'
            },{
            value: '地址',
              label: '2'
            },{
            value: '地址',
              label: '3'
            },{
            value: '地址',
              label: '4'
            }]
          }]
        },],
        tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          activeName: 'first'
    }
    
    },methods:{
        b(){
            this.side=false
        },
    handleClick(tab, event) {
      console.log(tab, event);
    }
    }

}
</script>